<template>
	<view class="main-top">
		<view class="top-box">
			<image class="top-logo" :src="$fileUrl+'ds1.png'"></image>
			<view class="line-box">
				<image class="top-line" :src="$fileUrl+'line.png'" mode="widthFix" v-if="!sayIng"></image>
				<image class="top-line" :src="$fileUrl+'line-gif.gif'" mode="widthFix" v-if="sayIng"></image>
			</view>
			<text>{{tipsWords}}</text>
		</view>
	</view>
</template>

<script setup lang="ts">
	const props = defineProps({
			sayIng:{ type: Boolean, default: false },
			tipsWords:{ type: String, default: '请选择服务类型' }
		})
</script>

<style lang="scss">
	.main-top {
		padding: 25rpx 0;
		font-size: 26rpx;
		
		.top-box {
			margin: 0 auto;
			width: 454rpx;
			text-align: center;
			box-shadow: 0rpx 1rpx 4rpx 1rpx rgba(0, 0, 0, 0.14);
			position: relative;
			border-radius: 10rpx;
			padding: 40rpx 0 20rpx 0;
			color: #4E4E4E;
			background-color: #fff;
		}
	
		.top-logo {
			width: 110rpx;
			height: 110rpx;
			display: block;
			margin: 0 auto;
			position: absolute;
			top: -55rpx;
			left: 170rpx;
		}
		.line-box{
			display: flex;
			align-items: center;
			height: 52rpx;
			margin-bottom: 5rpx;
		}
		.top-line {
			width: 365rpx;
			display: block;
			margin: 0 auto;
			height: 100%;
		}
	}
</style>